import React from 'react';
import {Button, Upload, Row} from 'antd';
import styles from './style.less';
import CommonModal from '../../component/CommonModal';
import {inject, observer} from 'mobx-react';

@inject('OwnerNewUsersStore')
@observer
class UploadPhotos extends React.Component {
  constructor(props) {
    super(props);
    this.store = this.props.OwnerNewUsersStore;
  }
  componentDidMount() {}
  getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  render() {
    let scope = this;
    let {
      requestCamera,
      takePictures,
      turnOff,
      imageUrl,
      changeImageUrl,
    } = this.store;
    const props = {
      name: 'file',
      action: '',
      headers: {
        authorization: 'authorization-text',
      },
      beforeUpload(file) {
        scope.getBase64(file, imageUrl => {
          changeImageUrl(imageUrl, file);
        });
        return false;
      },
      showUploadList: false,
    };
    let offsetWidth = parseInt(document.body.offsetWidth);
    let offsetHeight = parseInt(document.body.offsetHeight);
    let headerHeight = 50;
    let footerHeight = 50;
    let padding = 24;
    let width, height;
    if (width < height) {
      width = offsetWidth - headerHeight - footerHeight - 80;
      height = width;
    } else {
      height = offsetHeight - headerHeight - footerHeight - 80;
      width = height;
    }

    return (
      <Row className={styles['photo-upload-wrap']}>
        <img src={imageUrl} />
        <Row className={styles['upload-button-wrap']}>
          <Button
            className={styles['upload-photos']}
            onClick={() => {
              this.upload.click();
            }}>
            照片上传
          </Button>
          <Button className={styles['taking-pictures']} onClick={requestCamera}>
            拍照
          </Button>
        </Row>
        <Upload {...props}>
          <span
            style={{display: 'none'}}
            ref={c => {
              this.upload = c;
            }}
          />
        </Upload>
        <CommonModal
          title="拍照"
          width={609}
          className={styles['photo-wrap']}
          type={'taking-pictures'}
          onCancle={cancle => {
            cancle('taking-pictures');
            turnOff();
          }}
          onOk={cancle => {
            cancle('taking-pictures');
            takePictures();
          }}>
          <Row>
            <video
              id={'peace-video'}
              width={'561px'}
              height={'561px'}
              controls></video>
          </Row>
        </CommonModal>
      </Row>
    );
  }
}

export default UploadPhotos;
